
<template>
  <div>
    <navb></navb>
    <div class="dd">
      <div id="triangle">
        <img
          src="http://hbimg.b0.upaiyun.com/3d3bbb5626df7c0a52b0e665eea40a45dde19b051b795-9m8Sul_fw658"
        />
      </div>
    </div>
    <!-- <section class="base">
      <ul>
        <li
          v-for="(item, index) in 20"
          v-on:mouseenter="showDialog(index)"
          v-on:mouseleave="hideDialog(index)"
          :accesskey="index"
          style="position: relative;width: 100px;height: 50px;"
        >
          {{index}}
          <div class="handleDialog" v-if="ishow && index==current"></div>
        </li>
      </ul>
    </section>-->
    <div id="app">
      <vue-hover-mask @click="handleClick">
        <!-- 默认插槽 -->
        <img src="https://cn.vuejs.org/images/logo.png" alt srcset />
        <!-- action插槽 -->
        <template v-slot:action>
          <i class="iconfont icon-bianji-copy">编辑</i>
        </template>
      </vue-hover-mask>
    </div>
  </div>
</template>
 
<script>
import navb from "@/components/navb.vue";
export default {
  name: "app",

  components: {
    navb,
    VueHoverMask
  },
  data() {
    return {
      ishow: false,
      current: 0 //当前操作按钮
    };
  },
  methods: {
    showDialog(index, item) {
      this.ishow = true;
      this.current = index;
    },
    //隐藏蒙层
    hideDialog(index, item) {
      this.ishow = false;
      this.current = null;
    },

    handleClick() {
      console.log("click");
    }
  }
};
</script>
 
<style lang="less" scoped>
@import url("//at.alicdn.com/t/font_1262845_52b6h42svd7.css");
.iconfont {
  font-size: 25px;
}
dd {
  margin: 0px;

  padding: 0px;

  perspective: 1000px; /*设置景深*/

  transform-style: preserve-3d;
}

#triangle div {
  position: absolute;

  width: 200px;

  height: 200px;

  border: 1px solid red;
}

#triangle:hover {
  transform: rotateY(360deg);

  transition: 5s;
}

#triangle {
  position: relative;

  top: 40%;

  left: 0;

  width: 200px;

  height: 200px;

  border: 1px solid #333;

  margin: 0px auto;

  transform-style: preserve-3d;

  transform-origin: 50% 50% 50px;

  transform: rotateY(0deg);
}

#triangle div:nth-child(1) {
  position: absolute;
}

.handleDialog {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
</style>
